<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./jquery/jquery.min.js"></script>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
	<style>
		.title {
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="container">
		<h1 class="title">简单数据库管理系统</h1>
		<h2>数据库表</h2>
		<table class="table table-striped">
			<thead>
				<tr>
					<th scope="col">表名</th>
				</tr>
			</thead>
			<tbody id="databaseData">
			</tbody>
		</table>
	</div>
</body>

<script>
	function showTableNames(tableNames) {
		var tbody = document.getElementById("databaseData");
		let newInner = "";
		for (let i = 0; i < tableNames.length; i++) {
			newInner += `<tr>
					<td><a href="/exp3/tableDetail.html?tableName=${tableNames[i]}">${tableNames[i]}</a></td>
				</tr>`;
		}
		tbody.innerHTML = newInner;
	}

	function getAndShowTableNames() {
		$.ajax({
			url: "/exp3/TableNameController.php",
			type: "get",
			async: false,
			success: function(retData) {
				var data = eval('(' + retData + ')');
				showTableNames(data);
			}
		})
	}

	getAndShowTableNames();
</script>

</html>